<!-- 公共弹窗组件，插槽控制弹窗内容，用法参见 msg-pop 和 rule-pop -->
<template>
  <view class="pop-mask" @click.self="onClickMask">
    <view @click.stop="$emit('click-body')" class="pop-bg" :class="getClassName">
      <view class="pop-content">
        <slot></slot>
      </view>
      <view v-if="showClose" class="pop-close" @click="onClickClose"></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    className: {
      type: [String, Object, Array]
    },

    // 点击mask是否关闭弹窗，默认关闭
    closeOnClickMask: {
      type: Boolean,
      default: true
    },

    // 是否展示关闭按钮，默认展示
    showClose: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'normal'
    }
  },
  computed: {
    getClassName () {
      return [this.className, `pop-bg-${this.size}`]
    }
  },
  methods: {
    onClickMask () {
      if (this.closeOnClickMask) {
        this.close()
      }
    },

    onClickClose () {
      this.close()
    },

    close () {
      this.$emit('close', 'close')
    }
  }
}
</script>

<style lang="less" scoped>
.pop-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
}

.pop-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600rpx;
  height: 500rpx;
  font-size: 28rpx;
  background: #fff;
}

.pop-content {
  height: 100%;
}

.pop-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40rpx;
  height: 40rpx;
  background: black;
  border-radius: 50%;
  cursor: pointer;
}
</style>
